<template>
  <l-layout>
    <l-panel style="padding: 0">
      <template #toolLeft>
        <div class="l-panel--item" style="color: #333333;margin-right:35px">行政级别
        </div>
      </template>
      <l-table :columns="columns" :dataSource="tableData" :isMultiSelect="multiple" rowKey="f_ItemDetailId" @select="handleSelect" @selectAll="handleSelectAll"
       ref="selectTable">
      </l-table>
    </l-panel>
  </l-layout>
</template>

<script>
  export default {
    props: {
      multiple: {
        type: Boolean,
        default: true,
      },
      // sidx: {
      //   type: String,
      //   default: "F_CreateDate DESC",
      // },
      isChangeSearch: {
        type: Boolean,
        default: false,
      },
      selectLevel: {
        type: Array,
        default: () => [],
      },
      deleteLevel: {
        type: Object,
        default: () => {}
      },
      type: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        columns: [
          { label: '行政级别', prop: 'label', minWidth: '150' },
        ],
        tableData: [], // 展示的数据
        showType: 1,
        ids: []
      };
    },
    mounted() {
    this.lr_loadDataItem("LevelManage");
  },
    computed: {
      companyTree() {
        if (this.lr_companyTree) {
          return this.lr_companyTree;
        } else {
          return [];
        }
      },
      selectedData: {
        get() {
          return this.selectLevel;
        },
        set(val) {
          this.$emit("update:selectLevel", val);
        },
      },
      rowKey() {
        return this.multiple || this.isTree ? this.valueKey : "";
      },
      dataItemTree_Function() {
      return this.lr_dataItemTree(this.lr_dataItem["LevelManage"]);
    },
    },
    watch: {
      dataItemTree_Function: {
      handler(n) {
        this.tableData = n
      },
      immediate: true,
      deep: true,
    },
      selectedData: {
        handler(n) {
          n.map(v => {
            v.selectType = this.type
            v.f_RealName = v.f_ItemName
          })
          if (!n.length) {
            this.ids = []
            this.tableData.map(row => {
              this.$refs.selectTable.toggleRowSelection(row, false);
            })
          }
        },
        deep: true
      },
      deleteLevel: {
        handler(n) {
          this.selectedData = this.selectedData.filter(t => {
            return t.f_ItemDetailId !== n.f_ItemDetailId
          })
          this.ids = this.ids.filter(id => {
            return id !== n.f_ItemDetailId
          })
          let selectRow = this.selectedData.filter(t=>{
            return t.f_ItemDetailId == n.f_ItemDetailId
          })
          this.$refs.selectTable.toggleRowSelection(selectRow[0], false);
        },
        deep: true,
      }
    },
    created() {
    },
    methods: {
      handleSelect(selection, row) {
        if (row) {
          //判断新增或删除
          if (this.ids.indexOf(row.f_ItemDetailId) === -1) {
            this.selectedData.push(row)
            this.ids.push(row.f_ItemDetailId)
          } else {
            this.selectedData = this.selectedData.filter(v => {
              return v.f_ItemDetailId !== row.f_ItemDetailId
            })
            this.ids = this.ids.filter(v => {
              return v !== row.f_ItemDetailId
            })

          }
        }

      },
      handleSelectAll(selection) {
        if (this.tableData.length > 0) {
          if (this.getIsAllChecked()) {
            this.selectedData = selection.concat(this.selectedData);
            selection.map(v => {
              this.ids.push(v.f_ItemDetailId)
            })
          } else {
            this.selectedData = []
            this.ids = []
          }
        }
      },
      getIsAllChecked() {
        return this.$refs.selectTable.$refs.learunTable.store.states.isAllSelected
      },
    },
  };
</script>